<template>
  <div class="test">
    <h2>学生姓名：{{ name }}</h2>
    <h2 class="wowo">学生年龄：{{ age }}</h2>
    plugin中的fbind <input type="text" v-fbind:value="name" />
    <br />
    <button @click="addAge">1.点我age+1</button>
    <br />
    <button @click="helloInPlugin">2.plugin 中的hello方法</button>
    <br />
    <button @click="sendStudentName2App">
      3.点我发送姓名给App（自定义组件方式：this.$emit(））
    </button>
    <br />
    <button @click="unbind">4.点我解绑atguigu自定义事件（this.$off）</button>
    <br />
    <button @click="death">5.点我销毁Student的实例对象VC</button>
    <br />
    <button @click="sendData2SchoolByBus">6.点我传数据到School（$bus）</button>
    <br />
    <button @click="sendData2SchoolByPubsub">
      7.点我传数据到School（pubsub）</button
    ><br />
  </div>
</template>

<script>
// 引入混合，局部引入
import { myMixin } from '../maxin'
import pubsub from 'pubsub-js'

export default {
  name: 'Student',
  data() {
    return {
      name: 'Jin',
      age: 18,
    }
  },
  //   props.1: 只接收
  //   props:['name','age','sex']
  //   props.2: 限制类型
  //   props:{name:String, age:Number, sex:string}
  //   props.3: 限制类型、限制必要性、指定默认值
  props: {
    myName: {
      type: String, //类型
      required: true, //必要性
    },
    myAge: {
      type: Number,
    },
    mySex: {
      type: String,
      default: 'male', //默认值(必要时就无需默认了)
    },
  },
  mixins: [myMixin],
  methods: {
    addAge() {
      this.age++
      console.log('addAge被调用了')
    },
    helloInPlugin() {
      this.hello()
    },
    sendStudentName2App() {
      // 触发Student组件实例上的atguigu事件
      this.$emit('atguigu', this.name, 666, 888, 999)
      this.$emit('demo')
    },
    unbind() {
      this.$off('atguigu') // 解绑一个自定义事件
      // this.$off("atguigu","demo") // 解绑多个自定义事件
      // this.$off() // 解绑所有自定义事件
    },
    death() {
      this.$destroy() // 销毁了当前Student组件的实例，销毁后所有的Student实例及子组件的自定义事件全都不奏效
      console.log(
        '此时Student中的事件无法响应（如1.3.），plugin等全局定义的不受影响（如2.）'
      )
    },
    sendData2SchoolByBus() {
      this.$bus.$emit('busTest', this.name)
    },
    sendData2SchoolByPubsub() {
      pubsub.publish('pubsubTest', 666)
      pubsub.unsubscribe()
    },
  },
}
</script>

<style lang="less" scoped>
.test {
  background-color: orange;
  .wowo {
    font-size: 10px;
  }
}
</style>
